<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Synchronize MapView and SceneView - 4.4</title>


    <link rel="stylesheet" href="http://127.0.0.1/arcgis_js_api/library/4.4/esri/css/main.css">
    <link rel="stylesheet" href="css/mainApp.css">



    <script src="../dist/config.js"></script>
    <script src="http://127.0.0.1/arcgis_js_api/library/4.4/init.js"></script>

    <script>
        require([
            "esri/Map",

            "esri/views/MapView",
            "esri/views/SceneView",

            "esri/core/watchUtils",
                "dextra/modules/ViewSynchronizer",
            "dojo/domReady!"
        ], function(
                Map,
                MapView, SceneView,
                watchUtils,ViewSynchronizer
        ) {

            var map = new Map({
                basemap: 'satellite',
                ground: 'world-elevation'
            });

            var map2 = new Map({
                basemap: 'topo',
                ground: 'world-elevation'
            });

            var view1 = new SceneView({
                id: 'view1',
                container: 'view1Div',
                map: map
            });

            var view2 = new MapView({
                id: 'view2',
                container: 'view2Div',
                map: map,
                constraints: {
                    // Disable zoom snapping to get the best synchonization
                    snapToZoom: false
                }
            });

            var view3 = new MapView({
                id: 'view3',
                container: 'view3Div',
                map: map2,
                constraints: {
                    // Disable zoom snapping to get the best synchonization
                    snapToZoom: false
                }
            });


          var synchronizer=  new ViewSynchronizer([view1, view2]);

            synchronizer.add(view3)
        });
    </script>
</head>
<body>
<div id="view1Div" style="float: left; width:50%; height: 100%;"></div>
<div id="view2Div" style="float: left; width: 50%; height: 100%;"></div>

</body>

</html>